<template>
  <a-card style="margin-top:-2px" :bordered="false">
    <div class>
      <a-form-model>
        <!--查询条件 start-->
        <a-row class="form-row">
          <a-col :span="6" :offset="1">
            <a-form-model-item label="考评周期名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input style="width:210px" placeholder="请输入考评周期名称" v-model="queryParam.kpzqmc" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!--查询条件 end-->
        <!--操作按钮 start -->
        <a-row :gutter="24" algin="center" style="margin-top:10px">
          <a-col :md="12">
            <span style="float:right" class="table-page-search-submitButtons">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
          <a-col :md="11">
            <span class="table-page-search-submitButtons">
              <a-button
                type="primary"
                style="margin-left: 8px;float:right"
                @click="modelMethod('add',{})"
                v-action:add
              >新增</a-button>
            </span>
          </a-col>
        </a-row>
        <!--操作按钮 end -->
      </a-form-model>
    </div>
    <s-table
      class="text-overflow"
      ref="stable"
      size="default"
      :columns="columns"
      :data="loadData"
      style="margin-top:10px"
      :scroll="{ x: 150 }"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="modelMethod('detile',record)">详情</a>
        <a-divider type="vertical" />
        <a @click="modelMethod('del',record)" v-action:delete>删除</a>
        <a-divider type="vertical" />
        <a @click="modelMethod('edit',record)" v-action:update>编辑</a>
      </span>
      <span slot="kpzqlx" slot-scope="text">{{ kpzqlxEcho(text) }}</span>
      <span slot="kpzqzt" slot-scope="text">{{ kpzqztEcho(text) }}</span>
    </s-table>
    <!-- 弹出框 -->
    <a-modal
      :title="operate=='detile'?'详情':operate=='edit'?'编辑':'新增'"
      :width="900"
      v-model="modelVisible"
      :destroyOnClose="true"
      :confirmLoading="confirmLoading"
      centered
    >
      <template slot="footer">
        <a-button @click="handleCancel" v-show="operate!=='detile'">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk" v-show="operate!=='detile'">确定</a-button>
      </template>
      <a-form-model
        ref="ruleForm"
        :model="selectInfo"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row class="form-row">
          <a-col :span="20" :offset="1">
            <a-form-model-item
              :labelCol="{span:4}"
              :wrapperCol="{span:20}"
              label="考评周期名称"
              prop="kpzqmc"
            >
              <a-input
                :maxLength="80"
                placeholder="请输入考评周期名称"
                v-model="selectInfo.kpzqmc"
                :disabled="operate=='detile'?'disabled':false"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="20" :offset="1">
            <a-form-model-item
              :labelCol="{span:4}"
              :wrapperCol="{span:20}"
              label="考评周期类型"
              prop="kpzqlx"
            >
              <a-select
                placeholder="请选择考评周期类型"
                v-model="selectInfo.kpzqlx"
                :disabled="operate=='detile'?'disabled':false">
                <a-select-option key="1" value="1">单位</a-select-option>
                <a-select-option key="2" value="2">个人</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="20" :offset="1">
            <a-form-model-item
              :labelCol="{span:4}"
              :wrapperCol="{span:20}"
              label="考评周期状态"
              prop="kpzqzt"
            >
              <a-switch
                :disabled="operate=='detile'?'disabled':false"
                checked-children="有效"
                un-checked-children="无效"
                :checked="checked"
                @change="checkChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="20" :offset="1" style="padding-top:5px;">
            <a-form-model-item :labelCol="{span:4}" :wrapperCol="{span:20}" label="备注" prop="bz">
              <!-- <a-input v-model="selectInfo.bz" :disabled="operate=='detile'?'disabled':false" /> -->
              <a-textarea
                v-model="selectInfo.bz"
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                :disabled="operate=='detile'?'disabled':false"
                :maxLength="600"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
import { STable } from '@/components'
import { query, method, download } from '@/api/admin'

export default {
  components: {
    STable
  },
  data () {
    return {
      visible: false,
      checked: true,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},

      inAdd: false,
      inEdit: false,
      inDetail: false,

      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return query('/par/examperiod' + '/queryPage', 'GET', parameter).then(
          (res) => {
            return res.result
          }
        )
      },
      // 表头
      columns: [
        {
          title: '考评周期名称',
          dataIndex: 'kpzqmc',
          ellipsis: true
        },
        {
          title: '考评周期类型',
          dataIndex: 'kpzqlx',
          scopedSlots: { customRender: 'kpzqlx' }
        },
        {
          title: '考评周期状态',
          dataIndex: 'kpzqzt',
          scopedSlots: { customRender: 'kpzqzt' }
        },
        {
          title: '备注',
          dataIndex: 'bz',
          ellipsis: true
        },
        {
          title: '创建人',
          dataIndex: 'crtName'
        },
        {
          title: '创建时间',
          dataIndex: 'crtTime'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      rules: {
        kpzqmc: [{ required: true, message: '考评周期名称不能为空', trigger: 'blur' }],
        bz: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        kpzqlx: [{ required: true, message: '请选择考评周期类型', trigger: 'change' }]
      },
      modelVisible: false, // 弹出框显示
      operate: 'query', // 当前操作
      selectInfo: {
        kpzqmc: ''
      }, // 选中的数据
      confirmLoading: false, // Loading
      url: '/par/examperiod', // ajax请求地址
      loading: false
    }
  },
  created () {},
  methods: {
    checkChange () {
      this.checked = !this.checked
    },
    kpzqztEcho (text) {
      if (text === '1') {
        return '有效'
      } else if (text === '2') {
        return '无效'
      }
    },
    /**
     * 搜索
     */
    search () {
      this.$refs.stable.loadData({}, this.queryParam, {})
    },

    // 操作按钮
    modelMethod (action, selectInfo) {
      this.operate = action // 记录当前操作
      this.selectInfo = Object.assign({}, selectInfo) // 记录当前操作的数据
      if (this.selectInfo.kpzqzt === '1') {
        this.checked = true
      } else if (this.selectInfo.kpzqzt === '2') {
        this.checked = false
      }
      const _this = this
      if (this.operate === 'del') {
        // 删除
        this.$confirm({
          title: '警告',
          content: `确认要删除该条记录吗?`,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            _this.actionParam = {
              // 请求参数
              url: _this.url + '/delete',
              action: 'DELETE',
              parameter: {},
              data: _this.selectInfo,
              message: '删除成功'
            }
            // 调用请求
            method(_this.actionParam).then((res) => {
              _this.$refs.stable.refresh(true) // 刷新列表
            })
          },
          onCancel: () => {
            this.$notification['info']({
              message: '取消删除操作',
              duration: 4
            })
          }
        })
      } else {
        this.modelVisible = true // 弹出框显示
      }
    },
    // 确认
    handleOk () {
      const vm = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          vm.confirmLoading = true
          console.log(vm.selectInfo.kpzqzt)
          if (vm.checked) {
            vm.selectInfo.kpzqzt = '1'
          } else {
            vm.selectInfo.kpzqzt = '2'
          }
          if (vm.operate === 'detile') {
            // 详情
            vm.confirmLoading = false
            // 关闭编辑框
            vm.modelVisible = false
          }
          if (vm.operate === 'add') {
            // 新增
            vm.actionParam = {
              url: '/par/examperiod/insert',
              action: 'POST',
              parameter: {},
              data: vm.selectInfo,
              message: '新增成功'
            }
          }
          if (vm.operate === 'edit') {
            // 修改
            vm.actionParam = {
              url: '/par/examperiod/update',
              action: 'POST',
              parameter: {},
              data: vm.selectInfo,
              message: '修改成功'
            }
          }
          // 调用请求
          return method(vm.actionParam).then((res) => {
            vm.confirmLoading = false
            // 关闭编辑框
            vm.modelVisible = false
            // 刷新列表
            vm.$refs.stable.refresh(true)
          })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.modelVisible = false
    },
    exportExcel () {
      this.loading = true
      this.actionParam = {
        // 请求参数
        url: this.url + '/export',
        parameter: this.queryParam,
        action: 'GET',
        data: {}
      }
      return this.downloadFile(this.actionParam).then((res) => {
        download(res)
        this.loading = false
      })
    },
    /**
     * 下载
     */
    downloadFile (data) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(
        new Blob([data], { type: 'application/vnd.ms-excel' })
      )
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // 获取文件名
      // download 属性定义了下载链接的地址而不是跳转路径
      link.setAttribute('download', '测试代码生成.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    kpzqlxEcho (text) {
      if (text === '1') {
        return '单位'
      } else if (text === '2') {
        return '个人'
      }
    }
  }
}
</script>
<style scoped>
.text-overflow {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
